<template>
  <div class="kuwo">
    <div class="header">
      <div class="icon">
        <img
          src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2315792460,465034145&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">发现音乐</a></li>
          <li><a href="#">发现音乐</a></li>
          <li><a href="#">发现音乐</a></li>
        </ul>
      </div>
      <div class="search">
        <i class="el-icon-search" @click="getmusic"></i>
        <input
          type="text"
          placeholder="搜索音乐/MV/歌单/歌手"
          v-model="queryinfo.key" @keyup.enter="getmusic"
        />
      </div>
    </div>
    <div class="container">
      <div class="big_pic">
        <div class="lrc_con">
          <div class="lrc" @click="test">
            <p class="line_lrc" v-for="(item,k) in lrc" :key="k">{{item.lineLyric}}</p>
          </div>
        </div>
      </div>
      <div class="main">
        <span>搜索结果</span>
        <div class="sort">
          <a href="#">单曲</a><a href="#">专辑</a><a href="#">MV</a
          ><a href="#">歌手</a>
        </div>
      </div>
      <div class="music_list">
        <ul>
          <li>
            <span class="index">序号</span>
            <span class="pic"></span>
            <span class="song_name">歌曲</span>
            <span class="songer">歌手</span>
            <span class="album">专辑</span>
            <div class="time-control" style="text-align: right; padding-right: 10px">
              <span>时长</span>
            </div>
          </li>
          <li
            v-for="(item, k) in music_list"
            :key="item.rid"
            :class="[(k + 1) % 2 == 0 ? 'bg_color' : '']"
            @mouseover="control_view($event)"
            @mouseleave="view_out($event)"
          >
            <span class="index">{{ k + 1 }}</span>
            <span class="pic">
              <img :src="item.pic" alt="未找到图片" />
            </span>
            <span class="song_name" @click="getmusicbyid(item)">{{ item.name }}</span>
            <span class="songer" :title="item.artist">{{ item.artist }}</span>
            <span class="album">{{ item.album }}</span>
            <div class="time-control" style="text-align: right; padding-right: 10px">
              <span class="icon-con">
                <i class="iconfont icon-z"></i>
                <i class="iconfont icon-shoucang"></i>
                <i class="iconfont icon-jia"></i>
                <i class="iconfont icon-download"></i>
              </span>
              <span id="time_span">{{item.songTimeMinutes}}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="play_box">
        <div class="playmusic">
          <div class="pic">
            <img
              :src="current_music.pic_url"
              alt="未找到图片"
            />
          </div>
          <div class="play_progress">
            <div class="music_artist">
              <span :title="current_music.song_name+'-'+current_music.artist">{{current_music.song_name}}-{{current_music.artist}}</span>
              <span style="float:right">{{current_time}}/{{current_music.time}}</span>
            </div>
            <div class="progress" @click="progresschange($event)">
              <div class="gress">
                <div class="dot"></div>
              </div>
            </div>
          </div>
          <div class="play_control">
            <div class="prev">
              <i class="iconfont icon-shangyiqu" style="font-size: 24px"></i>
            </div>
            <div class="play">
              <i
                class="iconfont icon-bofang"
                style="font-size: 40px"
                @click="play_music($event)"
                ref="play_icon"></i>
            </div>
            <div class="next">
              <i class="iconfont icon-xiayiqu" style="font-size: 24px"></i>
            </div>
          </div>
          <div class="set_music">
            <i class="iconfont icon-shoucang"></i>
            <i class="iconfont icon-pinglun"></i>
            <i class="iconfont icon-hanhan-01-011"></i>
            <i class="iconfont icon-download"></i>
            <i class="iconfont icon-bofangliebiao"></i>
            <div class="music_type">
              <span title="品质">高品</span>
              <i class="el-icon-arrow-down"></i>
            </div>
          </div>
          <div class="volume">
            <i class="iconfont icon-icon-test"></i>
            <div class="volume_bar">
              <div class="progress">
                <div class="progress_button"></div>
              </div>
            </div>
          </div>
          <audio ref="audio" loop @play="start" @pause="stop"></audio>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.gettopmusic();
    this.test8();
  },
  data() {
    return {
      queryinfo: {
        key: "星辰大海",
        pn: 1,
        rn: 5,
      },
      music_list: [],
      current_music:{
        song_name:"音乐播放器",
        artist:"未知艺术家",
        time:"00:00",
        pic_url:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3490138431,1199488125&fm=26&gp=0.jpg",
        music_url:""
      },
      duration:0,
      current_time:"00:00",
      time_out:"",
      e:0,
      lrc:[]
    };
  },
  methods: {
    async getmusic() {
      const { data: res } = await this.$http.get(
        "search/searchMusicBykeyWord",
        { params: this.queryinfo }
      );
      this.music_list = res.data.list;
      // console.log(100);
    },
    async getmusicbyid(info) {
      const { data: res } = await this.$http.get("url", {
        params: { rid: info.rid },
      });
      this.current_music={
        song_name:info.name,
        artist:info.artist,
        time:info.songTimeMinutes,
        pic_url:info.pic,
        music_url:res.url
      }
      this.duration=parseInt(info.duration);
      this.e=0;
      this.$refs.audio.src = res.url;
      this.$refs.audio.play();
      this.$refs.play_icon.className="iconfont icon-zanting"
      const {data:lrc}=await this.$http.get("lrc",{params:{
        musicId:info.rid
      }})
      this.lrc=lrc.data.lrclist;
      // console.log(this.lrc);
    },
    play_music(e) {
      if(this.$refs.audio.src) {
        if(!this.$refs.audio.paused) {
          e.target.className="iconfont icon-bofang"
          this.$refs.audio.pause();
      }
        else {
          e.target.className="iconfont icon-zanting"
          // this.$refs.audio.src = this.current_music.music_url;
          this.$refs.audio.play();
        }
      }
    },
    control_view(event) {
      if(event.target.querySelector(".icon-con")!=null) {
        event.target.querySelector(".icon-con").style.display="block"
      }
      if(event.target.querySelector("#time_span")!=null) {
        event.target.querySelector("#time_span").style.display="none"
      }
    },
    view_out(event) {
      if(event.target.querySelector(".icon-con")!=null) {
        event.target.querySelector(".icon-con").style.display="none"
      }
      if(event.target.querySelector("#time_span")!=null) {
        event.target.querySelector("#time_span").style.display="inline"
      }
    },
    progresschange(event) {
      //paly_music父级定位元素
      var playmusic=document.querySelector('.playmusic');
      if(event.target.parentElement.className=='progress') {
        var x=event.target.parentElement.parentElement.offsetLeft
        const width=event.clientX-x-playmusic.offsetLeft;
        event.target.style.width=width+'px';
      }
      else {
        // console.log(event.clientX);
        var x=event.target.parentElement.offsetLeft
        const width=event.clientX-x-playmusic.offsetLeft;
        const gress=event.target.querySelector('.gress');
        gress.style.width=width+'px';
      }
    },
    start_time() {
      var that=this;
      var date=new Date(this.e);
      var minute = date.getMinutes()
      var second = date.getSeconds()
      var scroll_lrc=document.querySelector(".lrc");
      if(minute<=9) {
        minute = "0"+date.getMinutes()
      }
      else {
        minute=date.getMinutes()
      }
      if(second<=9) {
        second = "0"+date.getSeconds()
      }
      else {
        second=date.getSeconds()
      }
      that.current_time=minute + ':' + second;
      // console.log(minute + ':' + second);
      if(this.e<that.duration*1000) {
        const progress_width=Math.floor((350/this.duration))*(this.e/1000+1);
        const scroll_value=Math.floor(scroll_lrc.scrollHeight/this.duration)*(this.e/1000)+160
        // console.log(progress_width);
        if(progress_width>350) {
          progress_width=350;
        }
        const progress=document.querySelector('.play_progress').querySelector('.gress')
        progress.style.width=progress_width+'px'
        scroll_lrc.scrollTop=scroll_value
        this.e+=1000;

      }
      else {
        clearInterval(this.time_out);
        this.time_out=0;
        this.e=0;
        this.time_out=setInterval(this.start_time,1000);
      }
    },
    start() {
      if(this.time_out==0) {
        this.start_time();
      }
      clearInterval(this.time_out);
      this.time_out=0;
      this.time_out=setInterval(this.start_time,1000);
    },
    stop() {
      clearInterval(this.time_out);
      this.time_out=0;
    },
    async gettopmusic() {
      const {data:res}=await this.$http.get("rank/musicList");
      console.log(res.data);
      this.music_list=res.data.musicList;
    },
    async getLrc(id) {
      const {data:res}=await this.$http.get("lrc",{params:{
        musicId:id
      }})
      console.log(res);
    },
    test() {
      var scroll_lrc=document.querySelector(".lrc");
      console.log(scroll_lrc.scrollHeight);
      console.log(scroll_lrc.scrollTop);
    },
    
  },

};
</script>
<style scoped>
 @import "../assets/css/kuwo.css"
</style>
